<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        dl {
            border-bottom: 2px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        dl .show {min-height:72px;border: 1px solid #ddd;}
    </style>
</head>
<body>

<div id="app">
    <dl>
        <dt>复选</dt>
        <dd>
            <label>toggle:<input type="checkbox" :true-value="remember" :false-value="clear" v-model="toggle"></label>
        </dd>
        <dd class="show">
            toggle:
            <div>{{toggle}}</div>
        </dd>
    </dl>

    <dl>
        <dt>单选</dt>
        <dd>
            <label>pick:<input type="radio" :value="a" v-model="pick"></label>
        </dd>
        <dd class="show">
            pick:
            <div>{{pick}}</div>
        </dd>
    </dl>

    <dl>
        <dt>下拉列表</dt>
        <dd>
            <select name="" v-model="city">
                <option value="" disabled>---</option>
                <option :value="{city:'SH'}">SH</option>
                <option :value="{city:'BJ'}">BJ</option>
                <option :value="{city:'HZ'}">HZ</option>
            </select>
        </dd>
        <dd class="show">
            city:
            <div>{{city}}</div>
        </dd>
    </dl>

</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            toggle:'',
            remember:'Remember me',
            clear:'clear cookie',

            pick:'',
            a:'AA',

            city:''
        }
    });

</script>
</html>